<template>
	<view>
		<HeaderVue title=""></HeaderVue>
		<view class="bg">
			<view class="title">{{data.name}}</view>
			<view class="time">报名时间：{{data.sign_start_time}} 至 {{data.sign_end_time}}</view>
			<image :src="data.content_image" style="margin-top: 20rpx;">
			</image>
		</view>
		
		<view class="bottom" @click="goSign()">
			<view class="bottom-btn row-center">
				提交报名信息
			</view>
		</view>
	</view>
</template>

<script>
	import HeaderVue from '@/components/Header.vue'
	export default {
		components: {
			HeaderVue
		},
		data() {
			return {
				id:'',
				data:{}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getData()
		},
		methods: {
			async getData() {
				var res = await this.$req({
					url:'api/activities/get_info',
					data:{
						id:this.id,
					}
				})
				if(res.code == 1) {
					this.data = res.data
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			goSign(){
				uni.navigateTo({
					url:'/src/pages/index/sign'
				})
			}
		}
	}
</script>
<style>
	page {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(180deg, #FFB6C1 0%, #FCE5E5 100%);
	}
</style>
<style lang="scss" scoped>
	.bg {
		padding: 20rpx;
	}

	.title {
		font-weight: 600;
		font-size: 32rpx;
		color: #FF5280;
		line-height: 48rpx;
	}

	.time {
		font-weight: 400;
		font-size: 24rpx;
		color: #BF788D;
		line-height: 36rpx;
	}
	.content{
		height: 200rpx;
		background: #FEF5E7;
		border-radius: 24rpx ;
	}
	.bottom {

		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 200rpx;
		background: linear-gradient(180deg, #FAB5CB 0%, #FF96AC 100%);
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		display: flex;
		padding: 20rpx;
		z-index: 1200;

		.bottom-btn {
			width: 100%;
			height: 92rpx;
			background: #FFFFFF;
			box-shadow: inset 0rpx -8rpx 16rpx 0rpx #FE92BF;
			border-radius: 46rpx;
			border: 4rpx solid;
			border-image: linear-gradient(180deg, rgba(250, 181, 203, 1), rgba(250, 181, 203, 1)) 0 0;
			font-weight: 600;
			font-size: 28rpx;
			color: #FF5280;
			line-height: 44rpx;
		}

	}
</style>